<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*css reset 开始*/
			html,body{height: 100%;overflow: hidden;}
			html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
			a{text-decoration: none;display: block;}
			li{list-style: none;}
			img{display: block;}
			/*css reset 结束*/
			
			/*common css 开始*/
			.clearfix{*zoom: 1;}
			.clearfix:after{content: "";display: block;clear: both;}
			.commonTitle{ color:#009ee0; font-size:80px; line-height:0.8; 
				font-weight:bold; letter-spacing:-5px;
			}
			.commonText{color: white;line-height: 1.5; font-size:15px;}
			/*common css 结束*/
			
			/*头部样式 开始*/
			#head{background: white!important;width: 100%;}
			#head .headMain{width: 1100px;height: 80px;margin: 0 auto;position: relative;}
			#head .headMain > .logo{float: left;margin-top: 30px;}
			#head .headMain > .nav{float: right;margin-top: 50px;}
			#head .headMain > .nav > .list > li{float: left;margin-left: 40px;position: relative;}
			#head .headMain > .nav > .list > li .up{color: #000000;position: absolute;width: 0;overflow: hidden;transition:1s width;}
			#head .headMain > .nav > .list > li:hover .up{width: 100%;}
			#head .headMain > .arrow{width: 21px; height: 11px;background: url(img/menuIndicator.png);
										position: absolute;left: 50%;bottom: -11px;transition:1s left;
										z-index: 2;}
			/*头部样式 结束*/
			
			/*内容区样式 开始*/
			#content{background: gray;position: relative;overflow: hidden;width: 100%;}
			#content > .list{position: absolute;left: 0;top:0;width: 100%;transition:1s top;}
			#content > .list > li{position: relative;background-position:50% 50%!important;}
			#content > .list > li > section{width: 1100px;height: 520px;margin: auto;
									position: absolute;left: 0;right: 0;top: 0;bottom: 0;
									}
									
			
			#content > .list > .about{background: url(img/bg3.jpg) no-repeat;}
			#content > .list > .team{background: url(img/bg5.jpg) no-repeat;}
				/*第三屏 start*/
				#content > .list > .works{background: url(img/bg4.jpg) no-repeat;}
				#content > .list > .works  .works1{margin: 50px 0px 100px 50px;}
				#content > .list > .works  .works2{margin-left: 50px;}
				#content > .list > .works  .works2 > .item{float: left;width: 220px;height: 133px;margin: 0 1px;
															position: relative;overflow: hidden;}
				#content > .list > .works  .works2 > .item:last-of-type{width: 332px}
				
				#content > .list > .works  .works2 > .item .mask{position: absolute;left: 0;right: 0;top: 0;bottom: 0;
															box-sizing: border-box;padding: 10px;background: #000000;opacity:0;
															color: white;transition:1s opacity;
															}
				#content > .list > .works  .works2 > .item .mask .icon{width: 32px;height: 34px;margin: 0 auto;margin-top: 10px;
																	background: url(img/zoomico.png) no-repeat;
																	transition:1s background-position;
															}
				#content > .list > .works  .works2 > .item img{transition:1s transform;}											
															
															
				#content > .list > .works  .works2 > .item .mask .icon:hover{background-position:0 -35px ;}
				#content > .list > .works  .works2 > .item:hover .mask{opacity:0.8 ;}
				#content > .list > .works  .works2 > .item:hover img{transform: rotate(30deg) scale(1.5);}
				
				#content > .list > .works  .works3{width: 167px;height: 191px;background: url(img/robot.png) no-repeat;
													position: absolute;left: 900px;top: 170px;
													animation: works3Move 4s linear infinite;
													}
				@keyframes works3Move{
					0%{
						transform: translateX(0px) rotateY(0deg);
					}
					49%{
						transform: translateX(-490px) rotateY(0deg);
					}
					50%{
						transform: translateX(-500px) rotateY(180deg);
					}
					100%{
						transform: translateX(0px) rotateY(180deg);
					}
				}
				/*第三屏 end*/
				
				
				/*第二屏 start*/
				#content > .list > .course{background: url(img/bg2.jpg) no-repeat;}
				#content > .list > .course .course1{margin: 50px;}
				#content > .list > .course .course2{margin-left: 50px;width: 400px;}
				#content > .list > .course .course3{width: 480px;position: absolute;right:50px ;top: 70px;}
				
				#content > .list > .course .course3 .line{position: absolute;top:-7px;width: 9px;height: 410px;
														background: url(img/plus_row.png) no-repeat;}
				
				#content > .list > .course .course3 .line:nth-of-type(1){left: -5px;} 
				#content > .list > .course .course3 .line:nth-of-type(2){left: 115px;}
				#content > .list > .course .course3 .line:nth-of-type(3){left: 235px;}
				#content > .list > .course .course3 .line:nth-of-type(4){left: 355px;}
				#content > .list > .course .course3 .line:nth-of-type(5){left: 475px;}
				
				#content > .list > .course .course3 .item {float: left;width: 120px;height: 132px;position: relative;
															perspective: 500px;transform-style: preserve-3d;
															}
				#content > .list > .course .course3 .item .face,#content > .list > .course .course3 .item .backFace
				{position: absolute;left: 0;top: 0;width: 100%;height: 100%;box-sizing: border-box;padding: 15px;
					transition:1s transform;
				}
				
				#content > .list > .course .course3 .item .backFace{background-position: 50% 50%!important;}
				#content > .list > .course .course3 .item:nth-of-type(1) .backFace{background: url(img/apcoa.png) no-repeat;}
				#content > .list > .course .course3 .item:nth-of-type(2) .backFace{background: url(img/apcoa.png) no-repeat;}
				#content > .list > .course .course3 .item:nth-of-type(3) .backFace{background: url(img/bks.png) no-repeat;}
				#content > .list > .course .course3 .item:nth-of-type(4) .backFace{background: url(img/gu.png) no-repeat;}
				#content > .list > .course .course3 .item:nth-of-type(5) .backFace{background: url(img/hlx.png) no-repeat;}
				#content > .list > .course .course3 .item:nth-of-type(6) .backFace{background: url(img/lbs.png) no-repeat;}
				#content > .list > .course .course3 .item:nth-of-type(7) .backFace{background: url(img/leonberg.png) no-repeat;}
				#content > .list > .course .course3 .item:nth-of-type(8) .backFace{background: url(img/pcwelt.png) no-repeat;}
				#content > .list > .course .course3 .item:nth-of-type(9) .backFace{background: url(img/tata.png) no-repeat;}
				#content > .list > .course .course3 .item:nth-of-type(10) .backFace{background: url(img/bks.png) no-repeat;}
				#content > .list > .course .course3 .item:nth-of-type(11) .backFace{background: url(img/bks.png) no-repeat;}
				#content > .list > .course .course3 .item:nth-of-type(12) .backFace{background: url(img/bks.png) no-repeat;}
				#content > .list > .course .course3 .item .face{transform: rotateY(180deg);backface-visibility: hidden;
													    background: #009ee0;color: white;
																}
				
				#content > .list > .course .course3 .item:hover .face{transform: rotateY(360deg);}
				#content > .list > .course .course3 .item:hover .backFace{transform: rotateY(180deg);}
				/*第二屏 end*/
			
				/*第一屏 start*/
				#content > .list > .home{background: url(img/bg1.jpg) no-repeat;}
				#content > .list > .home .home1{width: 100%;height: 100%;perspective: 1000px;transform-style: preserve-3d;}
				#content > .list > .home .home1 > li{position: absolute;left: 0;right: 0;top: 0;bottom: 0;visibility: hidden;}
				#content > .list > .home .home1 > li:nth-child(1){background:#dc6c5f;}
				#content > .list > .home .home1 > li:nth-child(2){background:#95dc84;}
				#content > .list > .home .home1 > li:nth-child(3){background:#64b9d2;}
				#content > .list > .home .home1 > li:nth-child(4){background:#000000;}
				#content > .list > .home .home1 > li > div{color: white;text-align: center;margin-top: 200px;}
				#content > .list > .home .home1 > li.active{visibility: visible;}
				
				#content > .list > .home .home2{position: absolute;left: 0;right: 0;bottom:0;text-align: center;}
				#content > .list > .home .home2 > li {
					border-radius:50% ;width: 20px;height: 20px;background: rgba(255,255,255,0.5);display: inline-block;
					box-shadow: 0 0 4px rgba(25,25,25,0.8);cursor:pointer;
					}
				#content > .list > .home .home2 > li.active{background: white;cursor:default;}
				
					/*从左往右 leftHide  rightShow*/
					#content > .list > .home .home1 > li.leftHide{visibility: hidden;animation:1s leftHide 1 linear;}
					#content > .list > .home .home1 > li.rightShow{visibility: visible;animation:1s rightShow 1 linear;}
					@keyframes leftHide{
						0%{visibility: visible;}
						50%{transform: translateX(-40%) rotateY(30deg) scale(.8);}
						100%{transform: translateZ(-200px);}
					}
					@keyframes rightShow{
						0%{visibility: hidden;transform: translateZ(-200px);}
						50%{transform: translateX(40%) rotateY(-30deg) scale(.8);}
						100%{}
					}
					/*从右往左 leftShow  rightHide*/
					#content > .list > .home .home1 > li.leftShow{visibility: visible;animation:1s leftShow 1 linear;}
					#content > .list > .home .home1 > li.rightHide{visibility: hidden;animation:1s rightHide 1 linear;}
					@keyframes leftShow{
						0%{visibility: hidden;transform: translateZ(-200px);}
						50%{transform: translateX(-40%) rotateY(30deg) scale(.8);}
						100%{}
					}
					@keyframes rightHide{
						0%{visibility: visible;}
						50%{transform: translateX(40%) rotateY(-30deg) scale(.8);}
						100%{transform: translateZ(-200px);}
					}
				
				/*第一屏 end*/
			/*内容区样式 结束*/
			
		</style>
		<!--分辨率范围:1200 - 2000-->
	</head>
	<body>
		<section id="wrap">
			<!--流体布局-->
			<header id="head">
				<!--固定布局-->
				<div class="headMain">
					<h1 class="logo">
						<a href="javascript:;">
							<img src="img/logo.png"/>
						</a>
					</h1>
					<nav class="nav">
						<ul class="list clearfix">
							<li>
								<a href="javascript:;">
									<div class="up"><img src="img/home_gruen.png"/></div>
									<div class="down"><img src="img/home.png"/></div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Course</div>
									<div class="down">Course</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Works</div>
									<div class="down">Works</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">About</div>
									<div class="down">About</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Team</div>
									<div class="down">Team</div>
								</a>
							</li>
						</ul>
					</nav>
					<div class="arrow"></div>
				</div>
			</header>
			<section id="content">
				<ul class="list">
					<li class="home">
						<section>
							<ul class="home1">
								<li class="commonTitle active leftShow">
									<div class="item">one layer</div>
								</li>
								<li class="commonTitle rightHide">
									<div class="item">two layer</div>
								</li>
								<li class="commonTitle">
									<div class="item">three layer</div>
								</li>
								<li class="commonTitle">
									<div class="item">four layer</div>
								</li>
							</ul>
							<ul class="home2">
								<li class="active"></li>
								<li></li>
								<li></li>
								<li></li>
							</ul>
						</section>
					</li>
					<li class="course">
						<section>
							<header class="course1 commonTitle">
								<span>EINIGE</span>  <br />
								<span>UNSERER</span> <br />
								<span>KUNDEN</span>  <br />
							</header>
							<div class="course2 commonText">
								<p>
									Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen Zusammenarbeit, gleichzeitig aber auch das größte Lob, das man uns entgegenbringen kann. 
									<br />
									Diese und viele weitere große und kleine Kunden vertrauen uns seit Jahren, was uns stolz macht, und dafür sagen wir an dieser Stelle einfach mal.
								</p>
							</div>
							<div class="course3">
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<div class="item">
									<!--记一次3d坑爹之旅-->
									<!--
										谁在上面？
											backFace在上面
										谁在下面？
											face在下面
										有没有3D舞台？
											有3D舞台就有纵深
											初始化的时候：
												.face{transform: rotateY(180deg);backface-visibility: hidden;}
												就应该看到backFace（有背景的那一面）
											旋转的时候
												.face{transform: rotateY(360deg);backface-visibility: hidden;}
												.backFace{transform: rotateY(180deg);}
												在定位流里;3D舞台不影响最终层级。
												应该看到backFace（有背景的那一面的背面）
										
										
										chrome中有bug：3D视图更新不准确，内部模型准确
										火狐内部渲染完全符合w3c规范，渲染准确
									-->
									<div class="face">我有一头邱海峰XXXXXXXXX</div>
									<div class="backFace" style="background-color:pink ;">djaskdjalks</div>
								</div>
								<div class="item">
									<!--
										谁在上面？
											face在上面
										谁在下面？
											backFace在下面
										有没有3D舞台？
											有3D舞台就有纵深
											初始化的时候：
												.face{transform: rotateY(180deg);backface-visibility: hidden;}
												就应该看到face（邱海峰的背面  背面是隐藏的）
											旋转的时候
												.face{transform: rotateY(360deg);backface-visibility: hidden;}
												.backFace{transform: rotateY(180deg);}
												3D舞台不影响最终层级。
												应该看到face（邱海峰的正面）
										
										
										chrome中有bug：3D视图更新不准确，内部模型准确
										火狐内部渲染完全符合w3c规范，渲染准确
									-->
									<div class="backFace" >djaskdjalks</div>
									<div class="face" >我有一头邱海峰</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我有一头邱海峰</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我有一头邱海峰</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我有一头邱海峰</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我有一头邱海峰</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我有一头邱海峰</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我有一头邱海峰</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我有一头邱海峰</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我有一头邱海峰</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我有一头邱海峰</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我有一头邱海峰</div>
								</div>
							</div>
						</section>
					</li>
					<li class="works">
						<section>
							<header class="works1 commonTitle">
								<span>EINBLICK</span> 	<br />
								<span>ERKENNTNIS</span> <br />
								<span>ERGEBNIS</span>	<br />
							</header>
							<div class="works2">
								<div class="item">
									<img src="img/worksimg1.jpg"/>
									<div class="mask">
										<span>我有一头张晓飞,我有两天头张晓飞，我有三头张晓飞</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg2.jpg"/>
									<div class="mask">
										<span>我从来都不骑</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg3.jpg"/>
									<div class="mask">
										<span>突然一天心血来潮</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg4.jpg"/>
									<div class="mask">
										<span>骑他去赶集</span>
										<div class="icon"></div>
									</div>
								</div>
							</div>
							<div class="works3"></div>
						</section>
					</li>
					<li class="about">
						<section>about</section>
					</li>
					<li class="team">
						<section>team</section>
					</li>
				</ul>
			</section>
		</section>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//获取dom元素
			var arrowEl = document.querySelector("#head .headMain > .arrow");
			var liNodes = document.querySelectorAll("#head .headMain > .nav > .list > li");
			var upNodes = document.querySelectorAll("#head .headMain > .nav > .list > li .up");
			var firstLiNode  = liNodes[0];
			var firstUpNode  = firstLiNode.querySelector(".up");
			 
			var head = document.querySelector("#head") ;
			var content = document.querySelector("#content") ;
			var cLiNodes = document.querySelectorAll("#content .list > li");
			var cList =  document.querySelector("#content .list");
			
			//同步当前屏的索引   this.index---同步---now   now----不同步---  this.index
			var now =0;
			var timer = 0;
			//内容区
			window.onresize=function(){
				/*
				 调整分辨率
					1.没有点击的时候视口只能出现一屏  contentBind();
					2.点击后视口只能出现一屏  在1的基础上对每一屏的偏移量进行重新调整
					3.小箭头的位置也需要头部
				*/
				contentBind();
				cList.style.top = -now*(document.documentElement.clientHeight - head.offsetHeight)+"px";
				arrowEl.style.left = liNodes[now].offsetLeft + liNodes[now].offsetWidth/2 - arrowEl.offsetWidth/2+"px";
			}
			
			
			//内容区交互
			if(content.addEventListener){
				content.addEventListener("DOMMouseScroll",function(ev){
					ev=ev||event;
					
					//让fn的逻辑在DOMMouseScroll事件被频繁触发的时候只执行一次
					clearTimeout(timer);
					timer = setTimeout(function(){
						fn(ev)
					},200)
					
				});
			}
			content.onmousewheel=function(ev){
					ev=ev||event;
					clearTimeout(timer);
					timer = setTimeout(function(){
						fn(ev)
					},200)
			};
			function fn(ev){
				ev=ev||event;
				
				var dir="";
				if(ev.wheelDelta){
					dir = ev.wheelDelta>0?"up":"down";
				}else if(ev.detail){
					dir = ev.detail<0?"up":"down";
				}
				
				switch (dir){
					case "up":
						if(now>0){
							now--;
							move(now);
						}
						break;
					case "down":
						if(now<cLiNodes.length-1){
							now++;
							move(now);
						}
						break;
				}
			}
			
			
			contentBind();
			function contentBind(){
				content.style.height = document.documentElement.clientHeight - head.offsetHeight+'px';
				for(var i=0;i<cLiNodes.length;i++){
					cLiNodes[i].style.height = document.documentElement.clientHeight - head.offsetHeight+'px';
				}
			}
			 
			 
			//头部交互
			headBind();
			function headBind(){
				firstUpNode.style.width = "100%";
				arrowEl.style.left = firstLiNode.offsetLeft + firstLiNode.offsetWidth/2 - arrowEl.offsetWidth/2+"px";
				for(var i=0;i<liNodes.length;i++){
					//转绑很重要
					liNodes[i].index = i;
					liNodes[i].onclick=function(){
						//i:liNodes.length 5
						move(this.index);
						now = this.index;
					}
				}
			}
			//动画的核心函数
			move(0);
			function move(index){
				for(var i=0;i<upNodes.length;i++){
					//upNodes[i].style.width="0";
					upNodes[i].style.width="";
				}
				upNodes[index].style.width="100%";
				arrowEl.style.left = liNodes[index].offsetLeft + liNodes[index].offsetWidth/2 - arrowEl.offsetWidth/2+"px";
				cList.style.top = -index*(document.documentElement.clientHeight - head.offsetHeight)+"px";
			}
		}
	</script>
</html>
